<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地震小区划工作成果</title>
	<script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #app {
            padding: 0px;
            margin: 0px;
        }

        #app {
            border-top: 3px solid #0D9AFF;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0 rgba(200, 200, 200, 0.50);
            padding: 25px;
            background: url(../../images/bg.png) no-repeat;
            background-size: cover;
            /*background-attachment: fixed;*/
        }

        .tab-title {
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left: 10px;
            margin-bottom: 20px;
        }

        .pagination {
            text-align: center;
            margin-top: 30px;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }

        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
        }
    </style>
</head>

<body>
<div v-cloak id="app">
	<!--待办-->
    <!--审定弹窗-->
    <div v-if="linkStatus=='1'">
        <el-form :model="checkareaearthquake" :rules="rules" ref="checkareaearthquake" label-width="140px">
		    <!--建设工程情况-->
		    <el-row>
		        <el-col :span="4" class="tab-title">
		            建设工程情况
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="7">
		            <el-form-item label="项目名称:" prop="recordProjectName" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordProjectName" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="16">
		            <el-form-item label="项目地址:"   label-width="110px">
		                <span v-for="(item,index) in checkareaearthquake.address">
							<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.provinceValue'" :rules="rules.provinceValue">
							<el-select v-model="item.provinceValue" placeholder="请选择省" @change="chooseProvince(item)" style="" disabled>
								<el-option	
						    		v-for="items in item.provinceData"
						    		:key="items.code"
						    		:label="items.name"
						    		:value="items.name">
								</el-option>
							</el-select>
									</el-form-item>
							</el-col>
							<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
							<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.cityValue'" :rules="rules.cityValue">
							<el-select v-model="item.cityValue" placeholder="请选择市" @change="chooseCity(item)" style="" disabled>
								<el-option	
						    		v-for="items in item.cityData"
						    		:key="items.code"
						    		:label="items.name"
						    		:value="items.name">
								</el-option>
							</el-select>
							        </el-form-item>
							</el-col>
							<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
								<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.areaValue'" :rules="rules.areaValue">
							<el-select v-model="item.areaValue" placeholder="请选择区、县" @change="chooseArea(item)" style="" disabled>
						    	<el-option
							        v-for="items in item.areaData"
							        :key="items.code"
							        :label="items.name"
							        :value="items.name">
							    </el-option>
						    </el-select>
							      </el-form-item>
							    </el-col>
							<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
							    <el-col :span="7">
								    <el-form-item>
								    	<el-input v-model="item.detailAddress" placeholder="填写详细地址" disabled></el-input>
								    </el-form-item>
							    </el-col>
						    <el-button v-if="index=='0'" size="mini" @click="addAddress()" icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline" style="margin-left: 5px;" disabled>跨省</el-button>
						    <el-button v-if="index!='0'" size="mini" @click="delAddress(index,item)" icon="el-icon-delete" style="margin-left: 5px;" disabled>删除</el-button>
						</span>	
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="占地面积:" prop="recordLandArea" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordLandArea" placeholder="" style="width: 150px;"
		                          disabled></el-input>
		                平方千米
		            </el-form-item>
		        </el-col>
		        <el-col :span="7">
		            <el-form-item label="用地类型:" prop="recordLandType" label-width="110px">
		                <el-form-item prop="recordLandType">
		                    <el-select v-model="checkareaearthquake.recordLandType" placeholder="请选择"
		                               @change="syChangeValue" disabled style="width:250px;">
		                        <el-option label="涉核设施" value="0"></el-option>
		                        <el-option label="国家水电工程" value="1"></el-option>
		                        <el-option label="特殊设防类工程" value="2"></el-option>
		                        <el-option label="严重次生灾害工程" value="3"></el-option>
		                        <el-option label="省级重大建设工程" value="4"></el-option>
		                        <el-option label="重要基础设施" value="5"></el-option>
		                        <el-option label="其他" value="6"></el-option>
		                    </el-select>
		                </el-form-item>
		            </el-form-item>
		        </el-col>
		        <el-col :span="8" v-show="LandType == '0'">
                    <el-form-item label="区域内拟建重大工程:" prop="recordProposedProject" label-width="155px">
                        <el-input v-model="checkareaearthquake.recordProposedProject" placeholder="" style="width: 350px;" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-show="LandType == '1' || LandType == ''">
                    <el-form-item label="区域内拟建重大工程:" prop="" label-width="155px">
                        <el-input v-model="checkareaearthquake.recordProposedProject" placeholder="" style="width: 350px;" disabled></el-input>
                    </el-form-item>
                </el-col>
		        <el-col :span="8">
		            <el-form-item label="工程概况:" prop="recordProjectSurvey" label-width="120px">
		                <el-input v-model="checkareaearthquake.recordProjectSurvey" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <!--建设单位信息-->
		    <el-row>
		        <el-col :span="4" class="tab-title">
		            建设单位信息
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="12">
		            <el-form-item label="单位名称:" prop="recordUnitName" label-width="90px">
		                <el-input v-model="checkareaearthquake.recordUnitName" placeholder="" disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="联系人:" prop="recordUnitUser" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordUnitUser" placeholder="" disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col span="5">
		            <el-form-item label="电话" prop="recordUnitPhone" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordUnitPhone" placeholder="" disabled></el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="18">
		            <el-form-item label="营业执照号码或三证合一证照号码:" prop="recordUnitCode" label-width="240px">
		                <el-input v-model="checkareaearthquake.recordUnitCode" placeholder="" disabled></el-input>
		                </el-date-picker>
		            </el-form-item>
		        </el-col>
		        <el-col :span="5">
		            <el-form-item label="法人:" prop="recordUnitLegal" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordUnitLegal" placeholder="" disabled></el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <!--区域地震安全性评估情况-->
		    <el-row>
		        <el-col :span="4" class="tab-title">
		            区域地震安全性评估情况
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="10">
		            <el-form-item label="承担单位名称:" prop="recordProjectUnitname" label-width="120px">
		                <el-input v-model="checkareaearthquake.recordProjectUnitname" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="委托合同额:" prop="recordProjectContractAmount" label-width="180px">
		                <el-input v-model="checkareaearthquake.recordProjectContractAmount" placeholder="" style="width:160px"
		                          disabled></el-input> 万元
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="联系人:" prop="recordProjectUser" label-width="150px">
		                <el-input v-model="checkareaearthquake.recordProjectUser" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		
		    </el-row>
		    <el-row>
		        <el-col span="5">
		            <el-form-item label="电话:" prop="recordProjectPhone" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordProjectPhone" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col span="5">
		            <el-form-item label="承担单位法人:" prop="recordProjectLegal" label-width="150px">
		                <el-input v-model="checkareaearthquake.recordProjectLegal" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col span="6">
		            <el-form-item label="承担单位技术负责人:" prop="recordProjectDirector" label-width="180px">
		                <el-input v-model="checkareaearthquake.recordProjectDirector" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="审定单位名称:" prop="recordProjectCheckunit" label-width="150px">
		                <el-input v-model="checkareaearthquake.recordProjectCheckunit" placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		
		        <el-col :span="5">
		            <el-form-item label="审定完成时间:" prop="recordProjectCheckTime" label-width="120px">
		                <el-date-picker type="date" placeholder="选择日期"
		                                v-model="checkareaearthquake.recordProjectCheckTime" disabled>
		                </el-date-picker>
		            </el-form-item>
		        </el-col>
		        <el-col :span="5">
		            <el-form-item label="审定部门意见:" prop="recordProjectView" label-width="150px">
		                <el-select v-model="checkareaearthquake.recordProjectView" placeholder="请选择"
		                           style="width: 180px;" disabled>
		                    <el-option label="同意" value="1"></el-option>
		                    <el-option label="不同意" value="0"></el-option>
		                </el-select>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="备案级别:" prop="recordLevel" label-width="180px">
		                <el-select v-model="checkareaearthquake.recordLevel" placeholder="请选择备案级别" disabled>
		                    <el-option label="地市级" value="0"></el-option>
		                    <el-option label="省级" value="1"></el-option>
		                    <el-option label="国家级" value="2"></el-option>
		                </el-select>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="24">
		            <el-form-item label="附件:" label-width="110px">
		                <iframe width="100%" scrolling="no" style="height:200px;border: none;"   :src="link"></iframe>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <!--项目备案信息-->
		    <el-row>
		        <el-col :span="4" class="tab-title">
		            项目备案信息
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="6">
		            <el-form-item label="备案时间:" prop="recordTime" label-width="110px">
		                <el-date-picker
		                        disabled
		                        v-model="checkareaearthquake.recordTime"
		                        type="date"
		                        placeholder="">
		                </el-date-picker>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="备案人员:" prop="recordUser" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordUser" disabled placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="备案部门:" prop="recordOrg" label-width="110px">
		                <el-input v-model="checkareaearthquake.recordOrg" disabled placeholder=""
		                          disabled></el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="24">
		            <el-form-item label="备注:" prop="recordRemark" label-width="110px">
		                <el-input
		                        disabled
		                        type="textarea"
		                        :autosize="{ minRows: 8, maxRows: 8}"
		                        placeholder=""
		                        v-model="checkareaearthquake.recordRemark">
		                </el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <!--审定信息-->
		    <el-row>
		        <el-col :span="4" class="tab-title">
		            审定信息
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="6">
		            <el-form-item label="审定人员:" prop="checkUser" label-width="110px">
		                <el-input v-model="checkareaearthquake.checkUser" placeholder=""></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="审定人员机构:" prop="checkUserOrg">
		                <el-input v-model="checkareaearthquake.checkUserOrg" placeholder=""></el-input>
		            </el-form-item>
		        </el-col>
		        <el-col :span="6">
		            <el-form-item label="审定结果:" prop="checkResult" label-width="110px">
		                <el-select v-model="checkareaearthquake.checkResult" placeholder="请选择">
		                    <el-option label="同意" value="1"></el-option>
		                    <el-option label="不同意" value="0"></el-option>
		                </el-select>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row>
		        <el-col :span="24">
		            <el-form-item label="审定意见:" prop="checkView" label-width="110px">
		                <el-input
		                        type="textarea"
		                        :autosize="{ minRows: 8, maxRows: 8}"
		                        placeholder="请输入内容"
		                        v-model="checkareaearthquake.checkView">
		                </el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <!--操作栏-->
		    <el-row>
		        <el-col :span="22">
		            <div style="float:right;">
		                <el-button type="primary" size="small" style="width: 60px;height: 30px;"
		                           @click="checkonSubmit('checkareaearthquake')">审定
		                </el-button>
		                <el-button type="info" size="small" style="width: 60px;height: 30px;"
		                           @click="resetForm('checkareaearthquake');checkCancel()">取消
		                </el-button>
		            </div>
		        </el-col>
		    </el-row>
		</el-form>
    </div>
    <!--已办-->
    <!--查看弹窗-->
    <div v-if="linkStatus=='2'||linkStatus=='3'">
        <div style="margin-top: 10px;">
            <el-form :model="viewareaearthquake" :rules="rules" ref="viewareaearthquake" label-width="140px">
                <!--建设工程情况-->
                <el-row>
                    <el-col :span="4" class="tab-title">
                        建设工程情况
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="项目名称:" prop="recordProjectName" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordProjectName" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="项目地址:"   label-width="110px">
                            <span v-for="(item,index) in viewareaearthquake. address">
								<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.provinceValue'" :rules="rules.provinceValue">
								<el-select v-model="item.provinceValue" placeholder="请选择省" @change="chooseProvince(item)" style="width: 150px;" disabled>
									<el-option	
							    		v-for="items in item.provinceData"
							    		:key="items.code"
							    		:label="items.name"
							    		:value="items.name">
									</el-option>
								</el-select>
										</el-form-item>
								</el-col>
								<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
								<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.cityValue'" :rules="rules.cityValue">
								<el-select v-model="item.cityValue" placeholder="请选择市" @change="chooseCity(item)" style="width: 150px;" disabled>
									<el-option	
							    		v-for="items in item.cityData"
							    		:key="items.code"
							    		:label="items.name"
							    		:value="items.name">
									</el-option>
								</el-select>
										</el-form-item>
								</el-col>
								<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
								<el-col :span="4">
									<el-form-item :prop="'address.'+index+'.areaValue'" :rules="rules.areaValue">
								<el-select v-model="item.areaValue" placeholder="请选择区、县" @change="chooseArea(item)" style="width: 150px;" disabled>
							    	<el-option
								        v-for="items in item.areaData"
								        :key="items.code"
								        :label="items.name"
								        :value="items.name">
								    </el-option>
							    </el-select>
										  </el-form-item>
							    </el-col>
								<el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">
	                                <span>—</span>
	                            </el-col>
							    <el-col :span="7">
								    <el-form-item>
								    	<el-input v-model="item.detailAddress" placeholder="填写详细地址" disabled></el-input>
								    </el-form-item>
							    </el-col>
							    <el-button v-if="index=='0'" size="mini" @click="addAddress()" icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline" style="margin-left: 5px;" disabled>跨省</el-button>
							    <el-button v-if="index!='0'" size="mini" @click="delAddress(index,item)" icon="el-icon-delete" style="margin-left: 5px;" disabled>删除</el-button>
							</span>	
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="占地面积:" prop="recordLandArea" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordLandArea" placeholder="" style="width: 150px;"
                                      disabled></el-input>
                            平方千米
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="用地类型:" prop="recordLandType" label-width="110px">
                            <el-form-item prop="recordLandType">
                                <el-select v-model="viewareaearthquake.recordLandType" placeholder="请选择"
                                           @change="syChangeValue" disabled style="width：250px;">
                                    <el-option label="涉核设施" value="0"></el-option>
                                    <el-option label="国家水电工程" value="1"></el-option>
                                    <el-option label="特殊设防类工程" value="2"></el-option>
                                    <el-option label="严重次生灾害工程" value="3"></el-option>
                                    <el-option label="省级重大建设工程" value="4"></el-option>
                                    <el-option label="重要基础设施" value="5"></el-option>
                                    <el-option label="其他" value="6"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-show="LandType == '0'">
	                    <el-form-item label="区域内拟建重大工程:" prop="recordProposedProject" label-width="155px">
	                        <el-input v-model="checkareaearthquake.recordProposedProject" placeholder="" style="width: 350px;" disabled></el-input>
	                    </el-form-item>
	                </el-col>
	                <el-col :span="8" v-show="LandType == '1' || LandType == ''">
	                    <el-form-item label="区域内拟建重大工程:" prop="" label-width="155px">
	                        <el-input v-model="checkareaearthquake.recordProposedProject" placeholder="" style="width: 350px;" disabled></el-input>
	                    </el-form-item>
	                </el-col>
                    <el-col :span="8">
                        <el-form-item label="工程概况:" prop="recordProjectSurvey" label-width="120px">
                            <el-input v-model="viewareaearthquake.recordProjectSurvey" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--建设单位信息-->
                <el-row>
                    <el-col :span="4" class="tab-title">
                        建设单位信息
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位名称:" prop="recordUnitName" label-width="90px">
                            <el-input v-model="viewareaearthquake.recordUnitName" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系人:" prop="recordUnitUser" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordUnitUser" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="5">
                        <el-form-item label="电话" prop="recordUnitPhone" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordUnitPhone" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="营业执照号码或三证合一证照号码:" prop="recordUnitCode" label-width="240px">
                            <el-input v-model="viewareaearthquake.recordUnitCode" placeholder="" disabled></el-input>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="法人:" prop="recordUnitLegal" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordUnitLegal" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--区域地震安全性评估情况-->
                <el-row>
                    <el-col :span="4" class="tab-title">
                        区域地震安全性评估情况
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="承担单位名称:" prop="recordProjectUnitname" label-width="120px">
                            <el-input v-model="viewareaearthquake.recordProjectUnitname" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="委托合同额:" prop="recordProjectContractAmount" label-width="180px">
                            <el-input v-model="viewareaearthquake.recordProjectContractAmount" placeholder="" style="width:160px"
                                      disabled></el-input> 万元
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="联系人:" prop="recordProjectUser" label-width="150px">
                            <el-input v-model="viewareaearthquake.recordProjectUser" placeholder="" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="5">
                        <el-form-item label="电话:" prop="recordProjectPhone" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordProjectPhone" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="5">
                        <el-form-item label="承担单位法人:" prop="recordProjectLegal" label-width="150px">
                            <el-input v-model="viewareaearthquake.recordProjectLegal" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="承担单位技术负责人:" prop="recordProjectDirector" label-width="180px">
                            <el-input v-model="viewareaearthquake.recordProjectDirector" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审定单位名称:" prop="recordProjectCheckunit" label-width="150px">
                            <el-input v-model="viewareaearthquake.recordProjectCheckunit" placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="审定完成时间:" prop="recordProjectCheckTime" label-width="120px">
                            <el-date-picker type="date" placeholder="选择日期" disabled
                                            v-model="viewareaearthquake.recordProjectCheckTime">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="审定部门意见:" prop="recordProjectView" label-width="150px">
                            <el-select v-model="viewareaearthquake.recordProjectView" placeholder="请选择"
                                       style="width: 180px;" disabled>
                                <el-option label="同意" value="1"></el-option>
                                <el-option label="不同意" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备案级别:" prop="recordLevel" label-width="180px">
                            <el-select v-model="viewareaearthquake.recordLevel" placeholder="请选择备案级别" disabled>
                                <el-option label="地市级" value="0"></el-option>
                                <el-option label="省级" value="1"></el-option>
                                <el-option label="国家级" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="附件:" label-width="110px">
                            <iframe width="100%" scrolling="no" style="height:200px;;border: none;"   :src="link"></iframe>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--项目备案信息-->
                <el-row>
                    <el-col :span="4" class="tab-title">
                        项目备案信息
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="备案时间:" prop="recordTime" label-width="110px">
                            <el-date-picker
                                    disabled
                                    v-model="viewareaearthquake.recordTime"
                                    type="date"
                                    placeholder="">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备案人员:" prop="recordUser" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordUser" disabled placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备案部门:" prop="recordOrg" label-width="110px">
                            <el-input v-model="viewareaearthquake.recordOrg" disabled placeholder=""
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注:" prop="recordRemark" label-width="110px">
                            <el-input
                                    disabled
                                    type="textarea"
                                    :autosize="{ minRows: 8, maxRows: 8}"
                                    placeholder=""
                                    v-model="viewareaearthquake.recordRemark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--审定信息：审定状态为2：审定未过 、3：审定通过 时展示审定信息-->
                <div v-if="viewareaearthquake.status==2 || viewareaearthquake.status==3">
                    <el-row>
                        <el-col :span="4" class="tab-title">
                            审定信息
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="审定人员:" prop="checkUser" label-width="110px">
                                <el-input v-model="viewareaearthquake.checkUser" placeholder="" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="审定人员机构:" prop="checkUserOrg">
                                <el-input v-model="viewareaearthquake.checkUserOrg" placeholder="" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="审定结果:" prop="checkResult" label-width="110px">
                                <el-select v-model="viewareaearthquake.checkResult" placeholder="请选择" disabled>
                                    <el-option label="同意" value="1"></el-option>
                                    <el-option label="不同意" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="审定意见:" prop="checkView" label-width="110px">
                                <el-input
                                        disabled
                                        type="textarea"
                                        :autosize="{ minRows: 8, maxRows: 8}"
                                        placeholder="请输入内容"
                                        v-model="viewareaearthquake.checkView">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <!--操作栏-->
                <el-row>
                    <el-col :span="22">
                        <div style="float:right;">
                            <el-button type="info" size="small" style="width: 60px;height: 30px;"
                                       @click="viewCancel()">取消
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
 	</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
            	orgLevel:'',
                userName:'',
                orgName:'',
            	linkId:'', //项目ID
            	linkStatus:'', //状态码
                uuid: '',// uuid
                link: '',// iframe链接
                LandType:'',//控制区域内拟建重大工程字段是否必填
                address:[{
                	provinceValue:'',
	                cityValue:'',
	                areaValue:'',
                	provinceData:[],
                	cityData:[],
                	areaData:[]
                }], 
                viewareaearthquake: {
                    recordProjectName: '',
                    address:[{
                        provinceValue:'',
                        cityValue:'',
                        areaValue:'',
                        detailAddress:'',
                        provinceData:[],
                        cityData:[],
                        areaData:[]
                    }],
                    recordProjectAddress: '',
                    recordLandArea:'',
                    recordLandType: '',
                    recordProjectSurvey:'',
                    recordUnitName: '',
                    recordUnitUser: '',
                    recordUnitPhone: '',
                    recordUnitCode: '',
                    recordUnitLegal: '',
                    recordProjectUnitname: '',
                    recordProjectContractAmount: '',
                    recordProjectUser: '',
                    recordProjectPhone: '',
                    recordProjectLegal: '',
                    recordProjectDirector: '',
                    recordProjectCheckunit: '',
                    recordProjectCheckTime: '',
                    recordProjectView: '',
                    recordProjectFj: '',
                    recordTime: '',
                    recordUser: '',
                    recordOrg: '',
                    recordRemark: '',
                    status: '',
                    checkUser: '',
                    checkUserOrg: '',
                    checkResult: '',
                    checkView: '',
                    createUserId: '',
                    createTime: '',
                    updateUserId: '',
                    updateTime: '',
                    delFlag: '',
                    reportStatus: '',
                    recordLevel: ''
                },
                checkareaearthquake: {
                    recordProjectName: '',
                    address:[{
                        provinceValue:'',
                        cityValue:'',
                        areaValue:'',
                        detailAddress:'',
                        provinceData:[],
                        cityData:[],
                        areaData:[]
                    }],
                    recordProjectAddress: '',
                    recordLandArea:'',
                    recordLandType: '',
                    recordProjectSurvey:'',
                    recordUnitName: '',
                    recordUnitUser: '',
                    recordUnitPhone: '',
                    recordUnitCode: '',
                    recordUnitLegal: '',
                    recordProjectUnitname: '',
                    recordProjectContractAmount: '',
                    recordProjectUser: '',
                    recordProjectPhone: '',
                    recordProjectLegal: '',
                    recordProjectDirector: '',
                    recordProjectCheckunit: '',
                    recordProjectCheckTime: '',
                    recordProjectView: '',
                    recordProjectFj: '',
                    recordTime: '',
                    recordUser: '',
                    recordOrg: '',
                    recordRemark: '',
                    status: '',
                    checkUser: '',
                    checkUserOrg: '',
                    checkResult: '',
                    checkView: '',
                    createUserId: '',
                    createTime: '',
                    updateUserId: '',
                    updateTime: '',
                    delFlag: '',
                    reportStatus: '',
                    recordLevel: ''
                },
                rules: {
                    recordProjectName: [{
                        required: true,
                        message: '请输入项目名称',
                        trigger: 'blur'
                    }],
                   /* recordProjectAddress: [{
                        required: true,
                        message: '请输入项目地址',
                        trigger: 'blur'
                    }],*/
                    provinceValue: [{
                        required: true,
                        message: '请选择省',
                        trigger: 'change'
                    }],
                    cityValue: [{
                        required: true,
                        message: '请选择市',
                        trigger: 'change'
                    }],
                    areaValue: [{
                        required: true,
                        message: '请选择区、县',
                        trigger: 'change'
                    }],
                    recordLandArea: [{
                        required: true,
                        message: '请输入占地面积',
                        trigger: 'blur'
                    }],
                    recordLandType: [{
                        required: true,
                        message: '请选择用地类型',
                        trigger: 'blur'
                    }],
                    recordProposedProject: [{
                        required: true,
                        message: '请输入区域内拟建重大工程',
                        trigger: 'blur'
                    }],
                    recordProjectSurvey: [{
                        required: true,
                        message: '请选择工程概况',
                        trigger: 'blur'
                    }],
                    recordUnitName: [{
                        required: true,
                        message: '请输入单位名称',
                        trigger: 'blur'
                    }],
                    recordUnitUser: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    }],
                    recordUnitPhone: [{
                        required: true,
                        message: '请输入电话',
                        trigger: 'blur'
                    }],
                    recordUnitCode: [{
                        required: true,
                        message: '请输入营业执照号码或三证合一证照号码',
                        trigger: 'blur'
                    }],
                    recordUnitLegal: [{
                        required: true,
                        message: '请输入法人',
                        trigger: 'blur'
                    }],
                    recordProjectUnitname: [{
                        required: true,
                        message: '请输入承担单位名称',
                        trigger: 'blur'
                    }],
                    recordProjectContractAmount: [{
                        required: true,
                        message: '请输入委托合同额',
                        trigger: 'blur'
                    }],
                    recordProjectUser: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    }],
                    recordProjectPhone: [{
                        required: true,
                        message: '请输入电话',
                        trigger: 'blur'
                    }],
                    recordProjectLegal: [{
                        required: true,
                        message: '请输入承担单位法人',
                        trigger: 'blur'
                    }],
                    recordProjectDirector: [{
                        required: true,
                        message: '请输入承担单位技术负责人',
                        trigger: 'blur'
                    }],
                    recordProjectCheckunit: [{
                        required: true,
                        message: '请输入审定单位名称',
                        trigger: 'blur'
                    }],
                    recordProjectCheckTime: [{
                        required: true,
                        message: '请选择审定完成时间',
                        trigger: 'change'
                    }],
                    recordProjectView: [{
                        required: true,
                        message: '请选择审定部门意见',
                        trigger: 'blur'
                    }],
                    recordLevel: [{
                        required: true,
                        message: '请选择备案级别',
                        trigger: 'blur'
                    }],
                    fujian: [{
                        required: true,
                        message: '请输入附件',
                        trigger: 'blur'
                    }],
                    recordTime: [{
                        required: true,
                        message: '请选择备案时间',
                        trigger: 'change'
                    }],
                    startDate: [{
                        type: 'date',
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }],
                    endDate: [{
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'change'
                    }],
                    recordUser: [{
                        required: true,
                        message: '请输入备案人员',
                        trigger: 'blur'
                    }],
                    recordOrg: [{
                        required: true,
                        message: '请输入备案部门',
                        trigger: 'blur'
                    }],
                    subDepartment: [{
                        required: true,
                        message: '请输入备注',
                        trigger: 'blur'
                    }],
                    remarks: [{
                        required: false,
                        message: '请输入备注',
                        trigger: 'blur'
                    }],
                    checkUser: [{
                        required: true,
                        message: '请输入审定人员',
                        trigger: 'blur'
                    }],
                    checkUserOrg: [{
                        required: true,
                        message: '请输入审定人员机构',
                        trigger: 'blur'
                    }],
                    checkResult: [{
                        required: true,
                        message: '请输入审定结果',
                        trigger: 'blur'
                    }],
                    checkView: [{
                        required: true,
                        message: '请输入审定意见',
                        trigger: 'blur'
                    }]
                },
            }
        },
        created() {
            axios.get(appBaseUrl + '/json/ChinaCity.json').then(res => {
				this.checkareaearthquake.address.forEach((item, index) => {
					item.provinceData = res.data;
				});
				this.viewareaearthquake.address.forEach((item, index) => {
					item.provinceData = res.data;
				});
            }).catch(e => {
                this.$message.error("网络连接超时12");
            })
            // 获取登录用户信息
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.orgLevel = userInfo.orgLevel;
            // 中国地震局 ==> 中国, 山东省-济南市地震局 ==> 山东省-济南市
            this.orgName = userInfo.orgName.replace("地震局", "");
            this.userName=userInfo.loginName;
        },
        mounted() {
        	var url = window.location.href;
        	this.linkId = url.split("?")[1].split("=")[1];
            this.uuid=this.linkId;
            this.link="../upload/annex.html?uuid="+this.uuid+"&flag=0";
            this.getData();
        },
        methods: {
            getData() {
                axios({
                    method: 'post',
                    url: '/dzjap/regionrecord/getRegionRecord',
                    params: {
                       id: this.linkId
                    }
                })
            	.then(response => {
                if (response.data.code == 200) {
                		this.viewareaearthquake = response.data.data;
		                if(this.viewareaearthquake.recordLandType == '0' || this.viewareaearthquake.recordLandType == '3'){
	            			this.LandType = '0';
		            	}else{
		            		this.LandType = '1';
		            	}
		                var arr = this.viewareaearthquake.recordProjectAddress.split(",");
		                this.viewareaearthquake.address=[];
		                for(let i=0;i<arr.length;i++){
		                	this.viewareaearthquake.address.push({
		                		provinceValue:arr[i].split("-")[0],
				                cityValue:arr[i].split("-")[1],
				                areaValue:arr[i].split("-")[2],
                                detailAddress:arr[i].split("-")[3],
				                provinceData:[],
		                		cityData:[],
		                		areaData:[]
		                	})
		                }
                        this.checkareaearthquake = response.data.data;
                        this.checkareaearthquake.checkUser=this.userName;
                		this.checkareaearthquake.checkUserOrg=this.orgName+"地震局";
                        if(this.checkareaearthquake.recordLandType == '0' || this.checkareaearthquake.recordLandType == '3'){
	            			this.LandType = '0';
		            	}else{
		            		this.LandType = '1';
		            	}
		                var arr = this.checkareaearthquake.recordProjectAddress.split(",");
		                this.checkareaearthquake.address=[];
		                for(let i=0;i<arr.length;i++){
		                	this.checkareaearthquake.address.push({
		                		provinceValue:arr[i].split("-")[0],
				                cityValue:arr[i].split("-")[1],
				                areaValue:arr[i].split("-")[2],
                                detailAddress:arr[i].split("-")[3],
				                provinceData:[],
		                		cityData:[],
		                		areaData:[]
		                	})
		                }
                        this.linkStatus = response.data.data.status;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //调用父页面方法关闭弹窗
            editCancel(){
            	parent.vm.generalCancel();
            },  
            // 审定完成确认方法
            checkonSubmit(formName) {
                console.log(this.checkareaearthquake.recordId);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
		                axios({
		                    method: 'post',
		                    url: '/dzjap/regionrecord/check/' + this.checkareaearthquake.recordId,
		                    // data中必须有recordId
		                    data: this.checkareaearthquake
		                }).then((res) => {
		                    console.log(res);
		                    if (res.data.code == 200) {
		                        // 提交成功将要执行的代码
		                        this.getData();
		                        this.$message({
		                            message: '成功',
		                            type: 'success'
		                        });
		                        this.checkCancel();
		                    }
		                });
	                } else {
	                    console.log("error!!");
	                    return false;
	                }
                });
            },
            //调用父页面方法关闭弹窗
            checkCancel(){
            	parent.vm.areadzCancel();
            },
			viewCancel(){
				parent.vm.areadzCancel();
			},
            addAddress(){
                this.viewareaearthquake.address.push({
                    provinceValue:'',
                    cityValue:'',
                    areaValue:'',
                    detailAddress:'',
                    provinceData:[],
                    cityData:[],
                    areaData:[]
                })
            	axios.get('../../json/ChinaCity.json').then(res=>{
                    this.viewareaearthquake.address.forEach((item, index) => {
	                    item.provinceData = res.data;
	                })
				}).catch(e => {
					this.$message.error("网络连接超时");
			   })
                this.checkareaearthquake.address.push({
            		provinceValue:'',
	                cityValue:'',
	                areaValue:'',
                    detailAddress:'',
	                provinceData:[],
                	cityData:[],
                    areaData:[]
                })
                axios.get('../../json/ChinaCity.json').then(res=>{
                    this.checkareaearthquake.address.forEach((item, index) => {
                    item.provinceData = res.data;
            	})
            }).catch(e => {
                    this.$message.error("网络连接超时");
            })

            },
            delAddress(index,item){
            	this.viewareaearthquake.address.splice(index, 1);
                this.checkareaearthquake.address.splice(index, 1);
            },
            chooseProvince(item){
            	console.log(item)
            	console.log(item.provinceValue)
                item.cityData = [];
                item.areaData = [];
                item.provinceData.map(e=>{//遍历数据
                    if( item.provinceValue == e.name){
	                    item.cityData = e.cityList;
	                    return;
	                }
	            })
            },
            chooseCity(item){
            	console.log(item)
            	console.log(item.cityValue)           	
                this.newareaValue = '';
                item.cityData.map(e=>{//遍历数据
                    if( item.cityValue == e.name){
	                    item.areaData = e.areaList;
	                    return;
                	}
            	})
            },
            chooseArea(item){
                console.log(item)
                console.log(item.areaValue) 
                console.log(this.address)               
            }
        }

    })
</script>
</body>
</html>